<template>
  <div class="mining-report">
    <!-- 智能洞察概览 -->
    <div class="insights-overview">
      <div class="overview-header">
        <h3>智能业务洞察</h3>
        <div class="insight-filters">
          <select v-model="selectedInsightType" @change="filterInsights">
            <option value="">全部洞察</option>
            <option value="sales">销售洞察</option>
            <option value="customer">客户洞察</option>
            <option value="product">商品洞察</option>
            <option value="operation">运营洞察</option>
          </select>
          <button @click="refreshInsights" class="btn-refresh">刷新洞察</button>
        </div>
      </div>
      
      <div class="insights-grid">
        <div 
          v-for="insight in filteredInsights" 
          :key="insight.id"
          class="insight-card"
          :class="insight.priority"
        >
          <div class="insight-header">
            <div class="insight-type">{{ insight.type }}</div>
            <div class="insight-priority">{{ getPriorityText(insight.priority) }}</div>
          </div>
          <div class="insight-content">
            <div class="insight-title">{{ insight.title }}</div>
            <div class="insight-description">{{ insight.description }}</div>
            <div class="insight-data">
              <span class="data-point" v-for="data in insight.dataPoints" :key="data.label">
                <strong>{{ data.label }}:</strong> {{ data.value }}
              </span>
            </div>
          </div>
          <div class="insight-actions">
            <div class="recommendations">
              <h5>建议行动:</h5>
              <ul>
                <li v-for="action in insight.recommendations" :key="action">{{ action }}</li>
              </ul>
            </div>
            <div class="action-buttons">
              <button @click="implementAction(insight)" class="btn-implement">采纳建议</button>
              <button @click="dismissInsight(insight.id)" class="btn-dismiss">忽略</button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 数据挖掘分析 -->
    <div class="mining-analysis">
      <div class="analysis-tabs">
        <div 
          v-for="tab in analysisTabs" 
          :key="tab.key"
          :class="['analysis-tab', { active: activeAnalysisTab === tab.key }]"
          @click="switchAnalysisTab(tab.key)"
        >
          {{ tab.label }}
        </div>
      </div>

      <div class="analysis-content">
        <!-- 关联分析 -->
        <div v-if="activeAnalysisTab === 'association'" class="analysis-panel">
          <div class="panel-header">
            <h4>商品关联分析</h4>
            <div class="panel-controls">
              <label>最小支持度:</label>
              <input v-model="associationConfig.minSupport" type="number" step="0.01" min="0" max="1" />
              <label>最小置信度:</label>
              <input v-model="associationConfig.minConfidence" type="number" step="0.01" min="0" max="1" />
              <button @click="runAssociationAnalysis" class="btn-analyze">分析</button>
            </div>
          </div>
          
          <div class="association-results">
            <div class="association-rules">
              <h5>关联规则</h5>
              <div class="rules-list">
                <div v-for="rule in associationRules" :key="rule.id" class="rule-item">
                  <div class="rule-pattern">
                    <span class="antecedent">{{ rule.antecedent.join(' + ') }}</span>
                    <span class="arrow">→</span>
                    <span class="consequent">{{ rule.consequent.join(' + ') }}</span>
                  </div>
                  <div class="rule-metrics">
                    <span class="metric">支持度: {{ rule.support }}%</span>
                    <span class="metric">置信度: {{ rule.confidence }}%</span>
                    <span class="metric">提升度: {{ rule.lift }}</span>
                  </div>
                </div>
              </div>
            </div>
            
            <div class="frequent-itemsets">
              <h5>频繁项集</h5>
              <div class="itemsets-grid">
                <div v-for="itemset in frequentItemsets" :key="itemset.id" class="itemset-card">
                  <div class="itemset-items">{{ itemset.items.join(' + ') }}</div>
                  <div class="itemset-support">支持度: {{ itemset.support }}%</div>
                  <div class="itemset-count">出现次数: {{ itemset.count }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 客户细分 -->
        <div v-if="activeAnalysisTab === 'segmentation'" class="analysis-panel">
          <div class="panel-header">
            <h4>客户细分分析</h4>
            <div class="panel-controls">
              <select v-model="segmentationMethod">
                <option value="rfm">RFM分析</option>
                <option value="behavioral">行为分析</option>
                <option value="demographic">人口统计</option>
              </select>
              <button @click="runSegmentationAnalysis" class="btn-analyze">分析</button>
            </div>
          </div>
          
          <div class="segmentation-results">
            <div class="segments-overview">
              <div v-for="segment in customerSegments" :key="segment.id" class="segment-card">
                <div class="segment-header">
                  <h5>{{ segment.name }}</h5>
                  <span class="segment-size">{{ segment.size }}人 ({{ segment.percentage }}%)</span>
                </div>
                <div class="segment-characteristics">
                  <div class="characteristic" v-for="char in segment.characteristics" :key="char.name">
                    <span class="char-name">{{ char.name }}:</span>
                    <span class="char-value">{{ char.value }}</span>
                  </div>
                </div>
                <div class="segment-recommendations">
                  <h6>营销建议:</h6>
                  <ul>
                    <li v-for="rec in segment.marketingRecommendations" :key="rec">{{ rec }}</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 预测分析 -->
        <div v-if="activeAnalysisTab === 'prediction'" class="analysis-panel">
          <div class="panel-header">
            <h4>销售预测分析</h4>
            <div class="panel-controls">
              <select v-model="predictionPeriod">
                <option value="7">未来7天</option>
                <option value="30">未来30天</option>
                <option value="90">未来90天</option>
              </select>
              <button @click="runPredictionAnalysis" class="btn-analyze">预测</button>
            </div>
          </div>
          
          <div class="prediction-results">
            <div class="prediction-chart">
              <canvas ref="predictionChart" width="600" height="300"></canvas>
            </div>
            
            <div class="prediction-metrics">
              <div class="metric-card">
                <div class="metric-title">预测销售额</div>
                <div class="metric-value">¥{{ formatNumber(predictionData.totalSales) }}</div>
                <div class="metric-change" :class="{ positive: predictionData.growth > 0, negative: predictionData.growth < 0 }">
                  {{ predictionData.growth > 0 ? '+' : '' }}{{ predictionData.growth }}%
                </div>
              </div>
              
              <div class="metric-card">
                <div class="metric-title">预测订单数</div>
                <div class="metric-value">{{ predictionData.totalOrders }}</div>
                <div class="metric-change" :class="{ positive: predictionData.orderGrowth > 0, negative: predictionData.orderGrowth < 0 }">
                  {{ predictionData.orderGrowth > 0 ? '+' : '' }}{{ predictionData.orderGrowth }}%
                </div>
              </div>
              
              <div class="metric-card">
                <div class="metric-title">模型准确度</div>
                <div class="metric-value">{{ predictionData.accuracy }}%</div>
                <div class="metric-note">基于历史数据</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 异常检测 -->
        <div v-if="activeAnalysisTab === 'anomaly'" class="analysis-panel">
          <div class="panel-header">
            <h4>异常检测分析</h4>
            <div class="panel-controls">
              <select v-model="anomalyType">
                <option value="sales">销售异常</option>
                <option value="inventory">库存异常</option>
                <option value="customer">客户异常</option>
              </select>
              <button @click="runAnomalyDetection" class="btn-analyze">检测</button>
            </div>
          </div>
          
          <div class="anomaly-results">
            <div class="anomaly-alerts">
              <div v-for="anomaly in anomalies" :key="anomaly.id" class="anomaly-alert" :class="anomaly.severity">
                <div class="alert-icon">⚠️</div>
                <div class="alert-content">
                  <div class="alert-title">{{ anomaly.title }}</div>
                  <div class="alert-description">{{ anomaly.description }}</div>
                  <div class="alert-details">
                    <span class="detail-item" v-for="detail in anomaly.details" :key="detail.key">
                      <strong>{{ detail.key }}:</strong> {{ detail.value }}
                    </span>
                  </div>
                  <div class="alert-timestamp">检测时间: {{ anomaly.timestamp }}</div>
                </div>
                <div class="alert-actions">
                  <button @click="investigateAnomaly(anomaly)" class="btn-investigate">调查</button>
                  <button @click="resolveAnomaly(anomaly.id)" class="btn-resolve">标记已解决</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, nextTick } from 'vue'

const props = defineProps({
  data: {
    type: Array,
    default: () => []
  },
  filters: {
    type: Object,
    default: () => ({})
  }
})

// 洞察相关
const selectedInsightType = ref('')
const insights = ref([
  {
    id: 1,
    type: '销售洞察',
    priority: 'high',
    title: '周末销售高峰',
    description: '数据显示周末销售额比工作日高出30%，建议增加周末库存和人员配置。',
    dataPoints: [
      { label: '周末平均销售额', value: '¥8,500' },
      { label: '工作日平均销售额', value: '¥6,500' },
      { label: '增长幅度', value: '+30%' }
    ],
    recommendations: [
      '增加周末库存储备20%',
      '安排更多员工在周末值班',
      '推出周末专属促销活动'
    ]
  },
  {
    id: 2,
    type: '客户洞察',
    priority: 'medium',
    title: '客户流失预警',
    description: '检测到15%的老客户在过去30天内购买频率显著下降。',
    dataPoints: [
      { label: '潜在流失客户', value: '134人' },
      { label: '平均流失价值', value: '¥580' },
      { label: '挽回成功率', value: '65%' }
    ],
    recommendations: [
      '发送个性化优惠券',
      '主动电话回访',
      '推荐相关商品'
    ]
  },
  {
    id: 3,
    type: '商品洞察',
    priority: 'low',
    title: '商品组合优化',
    description: '可口可乐和薯片经常一起购买，建议创建组合套餐。',
    dataPoints: [
      { label: '关联度', value: '78%' },
      { label: '潜在收益', value: '¥2,300/月' },
      { label: '实施难度', value: '低' }
    ],
    recommendations: [
      '创建饮料+零食套餐',
      '调整商品陈列位置',
      '设计交叉销售策略'
    ]
  }
])

// 分析标签
const analysisTabs = ref([
  { key: 'association', label: '关联分析' },
  { key: 'segmentation', label: '客户细分' },
  { key: 'prediction', label: '预测分析' },
  { key: 'anomaly', label: '异常检测' }
])

const activeAnalysisTab = ref('association')

// 关联分析配置
const associationConfig = ref({
  minSupport: 0.1,
  minConfidence: 0.6
})

// 关联规则
const associationRules = ref([
  {
    id: 1,
    antecedent: ['可口可乐'],
    consequent: ['薯片'],
    support: 15.6,
    confidence: 78.2,
    lift: 2.3
  },
  {
    id: 2,
    antecedent: ['面包'],
    consequent: ['牛奶'],
    support: 12.4,
    confidence: 65.8,
    lift: 1.9
  }
])

// 频繁项集
const frequentItemsets = ref([
  {
    id: 1,
    items: ['可口可乐', '薯片'],
    support: 15.6,
    count: 156
  },
  {
    id: 2,
    items: ['面包', '牛奶'],
    support: 12.4,
    count: 124
  }
])

// 客户细分
const segmentationMethod = ref('rfm')
const customerSegments = ref([
  {
    id: 1,
    name: '高价值客户',
    size: 128,
    percentage: 14.3,
    characteristics: [
      { name: '平均消费', value: '¥580/月' },
      { name: '购买频率', value: '8.5次/月' },
      { name: '最近购买', value: '2天前' }
    ],
    marketingRecommendations: [
      '提供VIP专属服务',
      '优先推荐新品',
      '邀请参加会员活动'
    ]
  },
  {
    id: 2,
    name: '潜力客户',
    size: 267,
    percentage: 29.8,
    characteristics: [
      { name: '平均消费', value: '¥280/月' },
      { name: '购买频率', value: '4.2次/月' },
      { name: '最近购买', value: '5天前' }
    ],
    marketingRecommendations: [
      '推送个性化优惠',
      '增加互动频率',
      '引导增加购买频次'
    ]
  }
])

// 预测分析
const predictionPeriod = ref('30')
const predictionChart = ref(null)
const predictionData = ref({
  totalSales: 285600,
  totalOrders: 2856,
  growth: 12.5,
  orderGrowth: 8.3,
  accuracy: 87.2
})

// 异常检测
const anomalyType = ref('sales')
const anomalies = ref([
  {
    id: 1,
    severity: 'high',
    title: '销售额异常下降',
    description: '今日下午2-4点销售额比同期下降45%',
    details: [
      { key: '异常时段', value: '14:00-16:00' },
      { key: '下降幅度', value: '-45%' },
      { key: '影响金额', value: '¥1,200' }
    ],
    timestamp: '2025-01-15 16:30:00'
  },
  {
    id: 2,
    severity: 'medium',
    title: '库存异常消耗',
    description: '可口可乐库存消耗速度异常，可能存在损耗',
    details: [
      { key: '商品', value: '可口可乐' },
      { key: '异常消耗', value: '+25%' },
      { key: '建议检查', value: '盘点库存' }
    ],
    timestamp: '2025-01-15 15:20:00'
  }
])

// 计算属性
const filteredInsights = computed(() => {
  if (!selectedInsightType.value) return insights.value
  return insights.value.filter(insight => 
    insight.type.includes(selectedInsightType.value)
  )
})

// 方法
const getPriorityText = (priority) => {
  const map = {
    high: '高优先级',
    medium: '中优先级',
    low: '低优先级'
  }
  return map[priority] || priority
}

const filterInsights = () => {
  // 筛选逻辑已在computed中处理
}

const refreshInsights = () => {
  // 刷新洞察数据
  console.log('刷新洞察数据')
}

const implementAction = (insight) => {
  alert(`正在实施建议: ${insight.recommendations[0]}`)
}

const dismissInsight = (id) => {
  insights.value = insights.value.filter(insight => insight.id !== id)
}

const switchAnalysisTab = (tab) => {
  activeAnalysisTab.value = tab
}

const runAssociationAnalysis = () => {
  console.log('运行关联分析', associationConfig.value)
}

const runSegmentationAnalysis = () => {
  console.log('运行客户细分分析', segmentationMethod.value)
}

const runPredictionAnalysis = () => {
  console.log('运行预测分析', predictionPeriod.value)
  nextTick(() => {
    drawPredictionChart()
  })
}

const runAnomalyDetection = () => {
  console.log('运行异常检测', anomalyType.value)
}

const investigateAnomaly = (anomaly) => {
  alert(`调查异常: ${anomaly.title}`)
}

const resolveAnomaly = (id) => {
  anomalies.value = anomalies.value.filter(anomaly => anomaly.id !== id)
}

const formatNumber = (num) => {
  return num.toLocaleString()
}

// 绘制预测图表
const drawPredictionChart = () => {
  const canvas = predictionChart.value
  if (!canvas) return
  
  const ctx = canvas.getContext('2d')
  const width = canvas.width
  const height = canvas.height
  
  // 清空画布
  ctx.clearRect(0, 0, width, height)
  
  // 历史数据和预测数据
  const historicalData = [1200, 1350, 1100, 1450, 1680, 1520, 1750]
  const predictedData = [1820, 1950, 1780, 2100, 2250, 2180, 2400]
  const labels = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  
  // 绘制背景网格
  ctx.strokeStyle = '#e9ecef'
  ctx.lineWidth = 1
  for (let i = 1; i < 6; i++) {
    const y = (height / 6) * i
    ctx.beginPath()
    ctx.moveTo(50, y)
    ctx.lineTo(width - 50, y)
    ctx.stroke()
  }
  
  const stepX = (width - 100) / (labels.length - 1)
  const maxValue = Math.max(...historicalData, ...predictedData)
  
  // 绘制历史数据线
  ctx.strokeStyle = '#1890ff'
  ctx.lineWidth = 2
  ctx.beginPath()
  historicalData.forEach((value, index) => {
    const x = 50 + index * stepX
    const y = height - 50 - ((value / maxValue) * (height - 100))
    
    if (index === 0) {
      ctx.moveTo(x, y)
    } else {
      ctx.lineTo(x, y)
    }
    
    // 绘制数据点
    ctx.fillStyle = '#1890ff'
    ctx.beginPath()
    ctx.arc(x, y, 4, 0, 2 * Math.PI)
    ctx.fill()
  })
  ctx.stroke()
  
  // 绘制预测数据线
  ctx.strokeStyle = '#52c41a'
  ctx.setLineDash([5, 5])
  ctx.lineWidth = 2
  ctx.beginPath()
  predictedData.forEach((value, index) => {
    const x = 50 + index * stepX
    const y = height - 50 - ((value / maxValue) * (height - 100))
    
    if (index === 0) {
      ctx.moveTo(x, y)
    } else {
      ctx.lineTo(x, y)
    }
    
    // 绘制数据点
    ctx.fillStyle = '#52c41a'
    ctx.beginPath()
    ctx.arc(x, y, 4, 0, 2 * Math.PI)
    ctx.fill()
  })
  ctx.stroke()
  ctx.setLineDash([])
  
  // 绘制图例
  ctx.fillStyle = '#1890ff'
  ctx.fillRect(width - 200, 20, 15, 3)
  ctx.fillStyle = '#333'
  ctx.font = '12px Arial'
  ctx.fillText('历史数据', width - 180, 25)
  
  ctx.fillStyle = '#52c41a'
  ctx.fillRect(width - 200, 40, 15, 3)
  ctx.fillText('预测数据', width - 180, 45)
}

// 初始化
onMounted(() => {
  nextTick(() => {
    drawPredictionChart()
  })
})
</script>

<style scoped>
.mining-report {
  padding: 0;
}

.insights-overview {
  margin-bottom: 30px;
}

.overview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.overview-header h3 {
  margin: 0;
  color: #333;
  font-size: 18px;
}

.insight-filters {
  display: flex;
  gap: 10px;
  align-items: center;
}

.insight-filters select {
  padding: 8px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
}

.btn-refresh {
  padding: 8px 16px;
  background: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.btn-refresh:hover {
  background: #40a9ff;
}

.insights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 20px;
}

.insight-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-left: 4px solid #d9d9d9;
}

.insight-card.high {
  border-left-color: #f5222d;
}

.insight-card.medium {
  border-left-color: #faad14;
}

.insight-card.low {
  border-left-color: #52c41a;
}

.insight-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.insight-type {
  font-size: 12px;
  color: #666;
  background: #f5f5f5;
  padding: 4px 8px;
  border-radius: 4px;
}

.insight-priority {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: bold;
}

.insight-card.high .insight-priority {
  background: #fff2f0;
  color: #f5222d;
}

.insight-card.medium .insight-priority {
  background: #fffbe6;
  color: #faad14;
}

.insight-card.low .insight-priority {
  background: #f6ffed;
  color: #52c41a;
}

.insight-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

.insight-description {
  color: #666;
  line-height: 1.5;
  margin-bottom: 15px;
}

.insight-data {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 20px;
}

.data-point {
  font-size: 12px;
  color: #333;
}

.recommendations h5 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 14px;
}

.recommendations ul {
  margin: 0;
  padding-left: 20px;
}

.recommendations li {
  color: #666;
  font-size: 12px;
  margin-bottom: 5px;
}

.action-buttons {
  display: flex;
  gap: 10px;
  margin-top: 15px;
}

.btn-implement, .btn-dismiss {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.3s ease;
}

.btn-implement {
  background: #52c41a;
  color: white;
}

.btn-implement:hover {
  background: #73d13d;
}

.btn-dismiss {
  background: #f5f5f5;
  color: #666;
}

.btn-dismiss:hover {
  background: #e6f7ff;
}

.mining-analysis {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.analysis-tabs {
  display: flex;
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
}

.analysis-tab {
  padding: 15px 25px;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: all 0.3s ease;
  font-weight: 500;
}

.analysis-tab:hover {
  background: #e9ecef;
}

.analysis-tab.active {
  background: white;
  color: #1890ff;
  border-bottom-color: #1890ff;
}

.analysis-content {
  padding: 20px;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.panel-header h4 {
  margin: 0;
  color: #333;
}

.panel-controls {
  display: flex;
  gap: 10px;
  align-items: center;
}

.panel-controls label {
  font-size: 12px;
  color: #666;
}

.panel-controls input, .panel-controls select {
  padding: 6px 10px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 12px;
}

.btn-analyze {
  padding: 6px 12px;
  background: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.btn-analyze:hover {
  background: #40a9ff;
}

.association-results {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.rules-list {
  max-height: 300px;
  overflow-y: auto;
}

.rule-item {
  padding: 15px;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  margin-bottom: 10px;
}

.rule-pattern {
  margin-bottom: 10px;
}

.antecedent, .consequent {
  font-weight: bold;
  color: #333;
}

.arrow {
  margin: 0 10px;
  color: #1890ff;
  font-size: 16px;
}

.rule-metrics {
  display: flex;
  gap: 15px;
}

.metric {
  font-size: 12px;
  color: #666;
}

.itemsets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
}

.itemset-card {
  padding: 15px;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  text-align: center;
}

.itemset-items {
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

.segments-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.segment-card {
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 20px;
}

.segment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.segment-header h5 {
  margin: 0;
  color: #333;
}

.segment-size {
  font-size: 12px;
  color: #666;
}

.characteristic {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 12px;
}

.char-name {
  color: #666;
}

.char-value {
  font-weight: bold;
  color: #333;
}

.segment-recommendations h6 {
  margin: 15px 0 10px 0;
  color: #333;
  font-size: 12px;
}

.segment-recommendations ul {
  margin: 0;
  padding-left: 20px;
}

.segment-recommendations li {
  font-size: 11px;
  color: #666;
  margin-bottom: 5px;
}

.prediction-results {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
}

.prediction-chart {
  border: 1px solid #e9ecef;
  border-radius: 6px;
  padding: 20px;
}

.prediction-metrics {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.metric-card {
  padding: 15px;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  text-align: center;
}

.metric-title {
  font-size: 12px;
  color: #666;
  margin-bottom: 8px;
}

.metric-value {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.metric-change {
  font-size: 12px;
  font-weight: bold;
}

.metric-change.positive {
  color: #52c41a;
}

.metric-change.negative {
  color: #f5222d;
}

.metric-note {
  font-size: 10px;
  color: #999;
}

.anomaly-alerts {
  max-height: 400px;
  overflow-y: auto;
}

.anomaly-alert {
  display: flex;
  gap: 15px;
  padding: 20px;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  margin-bottom: 15px;
}

.anomaly-alert.high {
  border-left: 4px solid #f5222d;
  background: #fff2f0;
}

.anomaly-alert.medium {
  border-left: 4px solid #faad14;
  background: #fffbe6;
}

.alert-icon {
  font-size: 20px;
}

.alert-content {
  flex: 1;
}

.alert-title {
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
}

.alert-description {
  color: #666;
  margin-bottom: 10px;
  line-height: 1.5;
}

.alert-details {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 10px;
}

.detail-item {
  font-size: 12px;
  color: #333;
}

.alert-timestamp {
  font-size: 11px;
  color: #999;
}

.alert-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.btn-investigate, .btn-resolve {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
  transition: all 0.3s ease;
}

.btn-investigate {
  background: #1890ff;
  color: white;
}

.btn-investigate:hover {
  background: #40a9ff;
}

.btn-resolve {
  background: #52c41a;
  color: white;
}

.btn-resolve:hover {
  background: #73d13d;
}

@media (max-width: 768px) {
  .insights-grid {
    grid-template-columns: 1fr;
  }
  
  .analysis-tabs {
    flex-wrap: wrap;
  }
  
  .association-results,
  .prediction-results {
    grid-template-columns: 1fr;
  }
  
  .segments-overview {
    grid-template-columns: 1fr;
  }
}
</style>